<template>
  <div ref="boxRef">
    <!-- <div v-for="item in list">{{ item.name }}</div> -->
     <button @click="add">Add - {{ count }}</button>
     <Child v-if="showChild" />
     <button @click="showChild = !showChild">hide child</button>
  </div>
</template>

<script>
import { ref } from 'vue';
import { onBeforeMount } from 'vue';
import { onMounted } from 'vue';
import { onBeforeUpdate } from 'vue';
import { onUpdated } from 'vue';
import axios from 'axios';
import Child from './components/Child.vue';

export default {
  components: { Child },
  setup() { // 入口函数
    const list = ref([]);
    const boxRef = ref(null)
    const count = ref(0);
    const showChild = ref(true);

    onMounted(() => {
      // console.log('onMounted', boxRef.value)
      // // 接口请求通常在onMounted
      // axios.get('https://mock.mengxuegu.com/mock/66585c4db462b81cb3916d3e/songer/songer#!method=get')
      //   .then(res => {
      //     // console.log(boxRef.value)这个如果在挂载前理论上可能会拿不到
      //     list.value = res.data.data
      //   })
    })

    onBeforeMount(() => {
      // console.log('onBeforeMount', boxRef.value)
    })

    // 当某一个组件中的响应式变量存在变更导致组件更新（简单来说就是在页面中被使用的时候），下面两个钩子都会执行
    onBeforeUpdate(() => {
      // console.log('onBeforeUpdate')
    })

    onUpdated(() => {
      // console.log('onUpdated')
    })


    const add = () => {
      count.value++
    }
    return {
      list,
      boxRef,
      count,
      add,
      showChild
    }
  }
}
</script>

<style lang="css" scoped>

</style>